<template>
  <header data-db-parent-of="sb1" class="header base pageHeader">
    <div class="institution--res">
      <div class="container hidden-lg">
        <div class="institution-wrapper"></div>
      </div>
    </div>
    <div
      class="quickSearchFormContainer quickSearchFormContainer--detached js-search-detached__panel"
    >
      <div class="container">
        <div class="quick-search">
          <div
            aria-live="assertive"
            class="advanced-search__autocomplete__announcer sr-only"
          ></div>
          <div class="tab row clearfix">
            <div class="col-md-2 gutterless">
              <div class="dropBlock" data-db-parent-of="dbTab-0">
                <a href="#" class="dropBlock__link" data-db-target-for="dbTab-0"
                  ><span>Anywhere</span
                  ><i class="icon-arrow_d_n" aria-hidden="true"></i
                ></a>
                <ul
                  role="tablist"
                  class="rlist tab__nav dropblock--tab"
                  data-db-target-of="dbTab-0"
                >
                  <li role="presentation" class="tab__nav__item active">
                    <a
                      href="#pane-2af69538-c326-4a23-97d0-81fa0e2598ef0"
                      aria-controls="pane-0"
                      role="tab"
                      data-toggle="tab"
                      title="Anywhere"
                      id="pane-2af69538-c326-4a23-97d0-81fa0e2598ef0-con"
                      class="tab__nav__item__link"
                      tabindex="0"
                      aria-selected="true"
                      >Anywhere</a
                    >
                  </li>
                  <li role="presentation" class="tab__nav__item">
                    <a
                      href="#pane-2af69538-c326-4a23-97d0-81fa0e2598ef1"
                      aria-controls="pane-1"
                      role="tab"
                      data-toggle="tab"
                      title="This Journal"
                      id="pane-2af69538-c326-4a23-97d0-81fa0e2598ef1-con"
                      class="tab__nav__item__link"
                      tabindex="-1"
                      aria-selected="false"
                      >This Journal</a
                    >
                  </li>
                </ul>
              </div>
            </div>
            <div class="col-md-10">
              <div class="tab__content">
                <div
                  id="pane-2af69538-c326-4a23-97d0-81fa0e2598ef0"
                  aria-labelledby="pane-2af69538-c326-4a23-97d0-81fa0e2598ef0-con"
                  role="tabpanel"
                  class="tab__pane quick-search-pane__anywhere active"
                  aria-hidden="false"
                >
                  <form
                    action="/action/doSearch"
                    name="defaultQuickSearch"
                    method="get"
                  >
                    <fieldset>
                      <legend class="sr-only">Quick Search anywhere</legend>
                      <div class="input-group option-0">
                        <label
                          for="AllField2af69538-c326-4a23-97d0-81fa0e2598ef0"
                          class="sr-only"
                          >Enter words, phrases, DOI, keywords, authors,
                          etc...</label
                        >
                        <div
                          class="autoComplete_wrapper"
                          role="combobox"
                          aria-owns="autoComplete_list_1"
                          aria-haspopup="true"
                          aria-expanded="false"
                          aria-label="Enter a text or select an option"
                        >
                          <input
                            type="search"
                            autocomplete="off"
                            id="AllField2af69538-c326-4a23-97d0-81fa0e2598ef0"
                            name="AllField"
                            placeholder="Enter words, phrases, DOI, keywords, authors, etc..."
                            data-auto-complete-max-words="7"
                            data-auto-complete-max-chars="32"
                            data-contributors-conf="3"
                            data-topics-conf="3"
                            value=""
                            class="auto-complete"
                            aria-controls="autoComplete_list_1"
                            aria-autocomplete="both"
                          />
                        </div>
                      </div>
                      <ul
                        id="autoComplete_list_1"
                        role="listbox"
                        hidden=""
                        class="autoComplete rlist"
                      ></ul>
                      <button
                        type="submit"
                        title="Search"
                        class="btn quick-search__button"
                      >
                        <span class="sr-only">Search</span><span>Go</span>
                      </button>
                    </fieldset>
                  </form>
                </div>
                <div
                  id="pane-2af69538-c326-4a23-97d0-81fa0e2598ef1"
                  aria-labelledby="pane-2af69538-c326-4a23-97d0-81fa0e2598ef1-con"
                  role="tabpanel"
                  class="tab__pane quick-search-pane__anywhere"
                  aria-hidden="true"
                >
                  <form
                    action="/action/doSearch"
                    name="thisJournalQuickSearch"
                    method="get"
                  >
                    <fieldset>
                      <legend class="sr-only">Quick Search in Journals</legend>
                      <div class="input-group option-1 option-journal">
                        <label
                          for="AllField2af69538-c326-4a23-97d0-81fa0e2598ef1"
                          class="sr-only"
                          >Enter words, phrases, DOI, keywords, authors,
                          etc...</label
                        >
                        <div
                          class="autoComplete_wrapper"
                          role="combobox"
                          aria-owns="autoComplete_list_2"
                          aria-haspopup="true"
                          aria-expanded="false"
                          aria-label="Enter a text or select an option"
                        >
                          <input
                            type="search"
                            autocomplete="off"
                            id="AllField2af69538-c326-4a23-97d0-81fa0e2598ef1"
                            name="AllField"
                            placeholder="Enter words, phrases, DOI, keywords, authors, etc..."
                            data-auto-complete-max-words="7"
                            data-auto-complete-max-chars="32"
                            data-contributors-conf="3"
                            data-topics-conf="3"
                            value=""
                            class="auto-complete"
                            aria-controls="autoComplete_list_2"
                            aria-autocomplete="both"
                          />
                        </div>
                        <input type="hidden" name="SeriesKey" value="rsos" />
                      </div>
                      <ul
                        id="autoComplete_list_2"
                        role="listbox"
                        hidden=""
                        class="autoComplete rlist"
                      ></ul>
                      <button
                        type="submit"
                        title="Search"
                        class="btn quick-search__button"
                      >
                        <span class="sr-only">Search</span><span>Go</span>
                      </button>
                    </fieldset>
                  </form>
                </div>
              </div>
            </div>
            <div class="advanced-search--header">
              <div class="search-subhead__advanced">
                <a href="/search/advanced" title="Advanced Search"
                  >Advanced Search</a
                >
              </div>
            </div>
            <div class="col-md-1">
              <a href="#" title="Exit" class="icon-close_thin"></a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="header--first-row">
      <div class="container">
        <div class="row">
          <div class="col-md-12 first-header-cont">
            <div class="pull-left">
              <a href="/journals" class="logo-link">
                <!-- <picture>
                        <source
                          srcset="/specs/products/rsj/releasedAssets/images/mobile-logo-67aded4dc1f7b8dac90d70cc7692c99c.svg"
                          width="49" height="32" media="(max-width: 767px)"><img
                          src="/specs/products/rsj/releasedAssets/images/logo-4624b65b73c2070723979895b2fa46d3.svg"
                          width="242" height="63" alt="logo">
                      </picture> -->
                <picture>
                  <source width="49" height="32" media="(max-width: 767px)" />
                  <img
                    src="../assets/images/logo-4624b65b73c2070723979895b2fa46d3.svg"
                    width="242"
                    height="63"
                    alt="logo"
                  />
                </picture>
              </a>

              <div class="main-nav">
                <a href="#afterNav-ylg" class="sr-only-focusable"
                  >Skip main navigation</a
                ><a href="#main0" data-target="main0" data-toggle="nav"
                  ><span class="menu-text">Journal menu</span
                  ><i class="icon-menu2"
                    ><span class="sr-only">Open Drawer Menu</span></i
                  ><i class="icon-close_thin"
                    ><span class="sr-only">Close Drawer Menu</span></i
                  ></a
                >
                <nav
                  role="navigation"
                  id="main0"
                  data-ctrl-res="never"
                  aria-label="Main Navigation"
                  class="drawer__nav container"
                >
                  <div class="row">
                    <div class="col-md-12">
                      <a
                        href="#"
                        data-redirect-to="/"
                        class="menu-header hidden-md hidden-sm hidden-xs hidden-lg"
                        >Home</a
                      >
                      <ul role="menubar" class="menubar rlist--inline">
                        <li
                          role="menuitem"
                          aria-haspopup="true"
                          aria-label="All Journals"
                          id="menu-item-main0-0"
                          class="dropdown menu-parent"
                        >
                          <a
                            href="#"
                            id="main0-1"
                            data-toggle="dropdown"
                            class="dropdown__toggle"
                            ><span>All Journals</span
                            ><i
                              aria-hidden="true"
                              class="icon-arrow_r hidden-md hidden-sm hidden-xs hidden-lg"
                            ></i
                            ><i
                              aria-hidden="true"
                              class="icon-section_arrow_d"
                            ></i
                          ></a>
                          <ul
                            aria-labelledby="main0-1"
                            role="menu"
                            class="rlist dropdown__menu"
                          >
                            <li
                              role="menuitem"
                              tabindex="-1"
                              aria-label="Biographical Memoirs"
                              class="menu-item"
                            >
                              <a href="https://royalsocietypublishing.org/journal/rsbm">Biographical Memoirs</a>
                            </li>
                            <li
                              role="menuitem"
                              tabindex="-1"
                              aria-label="Biology Letters"
                              class="menu-item"
                            >
                              <a href="https://royalsocietypublishing.org/journal/rsbl">Biology Letters</a>
                            </li>
                            <li
                              role="menuitem"
                              tabindex="-1"
                              aria-label="Interface"
                              class="menu-item"
                            >
                              <a href="https://royalsocietypublishing.org/journal/rsif">Interface</a>
                            </li>
                            <li
                              role="menuitem"
                              tabindex="-1"
                              aria-label="Interface Focus"
                              class="menu-item"
                            >
                              <a href="https://royalsocietypublishing.org/journal/rsfs">Interface Focus</a>
                            </li>
                            <li
                              role="menuitem"
                              tabindex="-1"
                              aria-label="Notes and Records"
                              class="menu-item"
                            >
                              <a href="https://royalsocietypublishing.org/journal/rsnr">Notes and Records</a>
                            </li>
                            <li
                              role="menuitem"
                              tabindex="-1"
                              aria-label="Open Biology"
                              class="menu-item"
                            >
                              <a href="https://royalsocietypublishing.org/journal/rsob">Open Biology</a>
                            </li>
                            <li
                              role="menuitem"
                              tabindex="-1"
                              aria-label="Philosophical Transactions A"
                              class="menu-item"
                            >
                              <a href="/journal/rsta"
                                >Philosophical Transactions A</a
                              >
                            </li>
                            <li
                              role="menuitem"
                              tabindex="-1"
                              aria-label="Philosophical Transactions B"
                              class="menu-item"
                            >
                              <a href="https://royalsocietypublishing.org/journal/rstb"
                                >Philosophical Transactions B</a
                              >
                            </li>
                            <li
                              role="menuitem"
                              tabindex="-1"
                              aria-label="Proceedings A"
                              class="menu-item"
                            >
                              <a href="https://royalsocietypublishing.org/journal/rspa">Proceedings A</a>
                            </li>
                            <li
                              role="menuitem"
                              tabindex="-1"
                              aria-label="Proceedings B"
                              class="menu-item"
                            >
                              <a href="https://royalsocietypublishing.org/journal/rspb">Proceedings B</a>
                            </li>
                            <li
                              role="menuitem"
                              tabindex="-1"
                              aria-label="Royal Society Open Science"
                              class="menu-item"
                            >
                              <a href="https://royalsocietypublishing.org/journal/rsos"
                                >Royal Society Open Science</a
                              >
                            </li>
                          </ul>
                        </li>
                      </ul>
                    </div>
                  </div>
                </nav>
                <span id="afterNav-ylg" tabindex="-1"></span>
              </div>
              <div class="institution-wrapper"></div>
            </div>
            <div class="pull-right">
              <div class="header__quick-menu pull-right">
                <ul class="rlist--inline">
                  <li>
                    <div class="header__social-media">
                      <ul class="rlist--inline">
                        <li></li>
                        <li>
                          <a
                            target="_blank"
                            href="https://twitter.com/RSocPublishing"
                            title="Twitter"
                          >
                            <i class="icon-twitter2" aria-hidden="true"></i>
                          </a>
                        </li>
                        <li>
                          <a
                            target="_blank"
                            href="https://www.facebook.com/RoyalSocietyPublishing"
                            title="Facebook"
                          >
                            <i class="icon-facebook2" aria-hidden="true"></i>
                          </a>
                        </li>
                        <li>
                          <a
                            target="_blank"
                            href="https://bsky.app/profile/royalsocietypublishing.org"
                            title="Bluesky"
                          >
                            <i
                              class="icon-bluesky"
                              aria-hidden="true"
                              style=""
                            ></i>
                          </a>
                        </li>
                        <li>
                          <a
                            target="_blank"
                            href="/social/wechat"
                            title="WeChat"
                          >
                            <i class="icon-Wechat" aria-hidden="true"></i>
                          </a>
                        </li>
                        <li>
                          <a
                            target="_blank"
                            href="https://www.youtube.com/playlist?list=PLg7f-TkW11iXs1ziBbxsD-HS9WV0Uh6nj"
                            title="YouTube"
                          >
                            <i class="icon-Youtube" aria-hidden="true"></i>
                          </a>
                        </li>
                      </ul>
                    </div>
                  </li>
                  <li>
                    <div
                      data-widget-def="literatumNavigationLoginBar"
                      data-widget-id="14eb728e-67f6-4035-8ff1-8c6b8da03455"
                    >
                      <div>
                        <div class="loginBar">
                          <div>
                            <a href="https://royalsocietypublishing.org/action/showLogin?uri=%2Fjournal%2Frsos">
                              <span
                                class="icon-profile_empty"
                                title="Register/Sign In"
                              ></span>
                              <span class="sign-in-label">Sign in</span>
                            </a>
                          </div>
                        </div>
                        <div class="loginBar">
                          <div class="connect-anonymous-bar">
                            <a href="https://royalsocietypublishing.org/rsos/action/ssostart">
                              <span
                                class="icon-institution hidden-lg"
                                title="Institution Access"
                              ></span>
                              <span class="sign-in-label"
                                >Institutional Access</span
                              >
                            </a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li class="cart-wrapper">
                    <div
                      data-widget-def="eCommerceCartIndicatorWidget"
                      data-widget-id="c87cff43-fb3c-45b8-b466-17cbbff8c8c0"
                      class="eCommerceCartIndicatorWidget"
                    >
                      <div class="eCommerceCartIndicatorWidget">
                        <a
                          href="https://royalsocietypublishing.org/action/showCart?FlowID=1"
                          id="cartLabel"
                          title="Show shopping cart"
                        >
                          <div class="cartLabel">
                            <span class="icon-shoppingcart"></span>
                            <span
                              class="filter-count filter-count-bubble shopping-cart hidden"
                              data-id="cart-size"
                              >0</span
                            >

                            <span class="cartText">Cart</span>
                          </div>
                        </a>
                      </div>
                    </div>
                  </li>
                  <li class="header-quick-search">
                    <div class="js-search-detached">
                      <a
                        href="#"
                        title="Search"
                        class="js-search-detached__trigger quick-menu__item"
                        ><span>Search</span
                        ><i
                          aria-hidden="true"
                          class="block-icon icon-search"
                        ></i
                      ></a>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="header--second-row">
      <div class="generic-menu">
        <div class="main-nav">
          <a href="#afterNav-ljq" class="sr-only-focusable"
            >Skip main navigation</a
          ><a href="#journal-menu" data-target="journal-menu" data-toggle="nav"
            ><span class="menu-text">Journal menu</span
            ><i class="icon-menu2"
              ><span class="sr-only">Open Drawer Menu</span></i
            ><i class="icon-close_thin"
              ><span class="sr-only">Close Drawer Menu</span></i
            ></a
          >
          <nav
            role="navigation"
            id="journal-menu"
            data-ctrl-res="screen-md"
            aria-label="Main Navigation"
            class="drawer__nav container hidden-md hidden-sm hidden-xs"
          >
            <div class="row">
              <div class="col-md-12">
                <a href="#" data-redirect-to="/" class="menu-header hidden-lg"
                  >Home</a
                >
                <ul role="menubar" class="menubar rlist--inlinety">
                  <li
                    role="menuitem"
                    aria-label="Home"
                    id="menu-item-journal-menu-0"
                    class="menu-item"
                  >
                    <!-- <a href="/journal/rsos">Home</a> -->
                    <a href="#" @click="navigateToHome">Home</a>
                  </li>
                  <li
                    role="menuitem"
                    aria-haspopup="true"
                    aria-label="Content"
                    id="menu-item-journal-menu-1"
                    class="dropdown menu-parent"
                  >
                    <a
                      href="#"
                      id="journal-menu-1"
                      data-toggle="dropdown"
                      class="dropdown__toggle"
                      ><span>Content</span
                      ><i aria-hidden="true" class="icon-arrow_r hidden-lg"></i
                      ><i
                        aria-hidden="true"
                        class="icon-section_arrow_d hidden-md hidden-sm hidden-xs"
                      ></i
                    ></a>
                    <ul
                      aria-labelledby="journal-menu-1"
                      role="menu"
                      class="rlist dropdown__menu"
                    >
                      <li
                        role="menuitem"
                        tabindex="-1"
                        aria-label="Latest issue"
                        class="menu-item"
                      >
                        <a href="https://royalsocietypublishing.org/toc/rsos/current">Latest issue</a>
                      </li>
                      <li
                        role="menuitem"
                        tabindex="-1"
                        aria-label="All content"
                        class="menu-item"
                      >
                        <a href="https://royalsocietypublishing.org/loi/rsos">All content</a>
                      </li>
                      <li
                        role="menuitem"
                        tabindex="-1"
                        aria-label="Subject collections"
                        class="menu-item"
                      >
                        <a href="https://royalsocietypublishing.org/rsos/collection">Subject collections</a>
                      </li>
                      <li
                        role="menuitem"
                        tabindex="-1"
                        aria-label="Special collections"
                        class="menu-item"
                      >
                        <a href="https://royalsocietypublishing.org/rsos/special-collections"
                          >Special collections</a
                        >
                      </li>
                      <li
                        role="menuitem"
                        tabindex="-1"
                        aria-label="Article seminars"
                        class="menu-item"
                      >
                        <a href="https://cassyni.com/c/royal-society-seminars"
                          >Article seminars</a
                        >
                      </li>
                      <li
                        role="menuitem"
                        tabindex="-1"
                        aria-label="Blog posts"
                        class="menu-item"
                      >
                        <a
                          href="https://royalsociety.org/blog/blogcategorylistings/?tab=publishing"
                          >Blog posts</a
                        >
                      </li>
                    </ul>
                  </li>
                  <li
                    role="menuitem"
                    aria-haspopup="true"
                    aria-label="Information for"
                    id="menu-item-journal-menu-2"
                    class="dropdown menu-parent"
                  >
                    <a
                      href="#"
                      id="journal-menu-2"
                      data-toggle="dropdown"
                      class="dropdown__toggle"
                      ><span>Information for</span
                      ><i aria-hidden="true" class="icon-arrow_r hidden-lg"></i
                      ><i
                        aria-hidden="true"
                        class="icon-section_arrow_d hidden-md hidden-sm hidden-xs"
                      ></i
                    ></a>
                    <ul
                      aria-labelledby="journal-menu-2"
                      role="menu"
                      class="rlist dropdown__menu"
                    >
                      <li
                        role="menuitem"
                        tabindex="-1"
                        aria-label="Authors"
                        class="menu-item"
                      >
                        <a href="https://royalsocietypublishing.org/rsos/for-authors">Authors</a>
                      </li>
                      <li
                        role="menuitem"
                        tabindex="-1"
                        aria-label="Reviewers"
                        class="menu-item"
                      >
                        <a href="https://royalsocietypublishing.org/rsos/for-reviewers">Reviewers</a>
                      </li>
                      <li
                        role="menuitem"
                        tabindex="-1"
                        aria-label="Readers"
                        class="menu-item"
                      >
                        <a href="https://royalsocietypublishing.org/rsos/for-readers">Readers</a>
                      </li>
                      <li
                        role="menuitem"
                        tabindex="-1"
                        aria-label="Institutions"
                        class="menu-item"
                      >
                        <a href="https://royalsociety.org/journals/librarians/"
                          >Institutions</a
                        >
                      </li>
                    </ul>
                  </li>
                  <li
                    role="menuitem"
                    aria-haspopup="true"
                    aria-label="About us"
                    id="menu-item-journal-menu-3"
                    class="dropdown menu-parent"
                  >
                    <a
                      href="#"
                      id="journal-menu-3"
                      data-toggle="dropdown"
                      class="dropdown__toggle"
                      ><span>About us</span
                      ><i aria-hidden="true" class="icon-arrow_r hidden-lg"></i
                      ><i
                        aria-hidden="true"
                        class="icon-section_arrow_d hidden-md hidden-sm hidden-xs"
                      ></i
                    ></a>
                    <ul
                      aria-labelledby="journal-menu-3"
                      role="menu"
                      class="rlist dropdown__menu"
                    >
                      <li
                        role="menuitem"
                        tabindex="-1"
                        aria-label="About the journal"
                        class="menu-item"
                      >
                        <a href="https://royalsocietypublishing.org/rsos/rsos/about">About the journal</a>
                      </li>
                      <li
                        role="menuitem"
                        tabindex="-1"
                        aria-label="Editorial board"
                        class="menu-item"
                      >
                        <a href="https://royalsocietypublishing.org/rsos/rsos/editorial-board">Editorial board</a>
                      </li>
                      <li
                        role="menuitem"
                        tabindex="-1"
                        aria-label="Author benefits"
                        class="menu-item"
                      >
                        <a href="https://royalsocietypublishing.org/rsos/rsos/author-benefits">Author benefits</a>
                      </li>
                      <li
                        role="menuitem"
                        tabindex="-1"
                        aria-label="Policies"
                        class="menu-item"
                      >
                        <a
                          href="https://royalsociety.org/journals/ethics-policies/"
                          >Policies</a
                        >
                      </li>
                      <li
                        role="menuitem"
                        tabindex="-1"
                        aria-label="Journal metrics"
                        class="menu-item"
                      >
                        <a href="/rsos/citation-metrics">Journal metrics</a>
                      </li>
                      <li
                        role="menuitem"
                        tabindex="-1"
                        aria-label="Publication times"
                        class="menu-item"
                      >
                        <a
                          href="https://royalsociety.org/journals/authors/benefits/publishing-times/"
                          >Publication times</a
                        >
                      </li>
                      <li
                        role="menuitem"
                        tabindex="-1"
                        aria-label="Open access"
                        class="menu-item"
                      >
                        <a href="https://royalsociety.org/journals/open-access/"
                          >Open access</a
                        >
                      </li>
                    </ul>
                  </li>
                  <li
                    role="menuitem"
                    aria-label="Sign up for alerts"
                    id="menu-item-journal-menu-4"
                    class="menu-item"
                  >
                    <a href="https://rsj.scienceconnect.io/login"
                      >Sign up for alerts</a
                    >
                  </li>
                  <li
                    role="menuitem"
                    aria-label="RSS feeds"
                    id="menu-item-journal-menu-5"
                    class="menu-item"
                  >
                    <a href="https://royalsocietypublishing.org/rsos/rss">RSS feeds</a>
                  </li>
                  <li
                    role="menuitem"
                    aria-label="Submit"
                    id="menu-item-journal-menu-6"
                    class="menu-item"
                  >
                    <a href="#" @click="navigateToSubmit">Submit</a>
                  </li>
                </ul>
              </div>
            </div>
          </nav>
          <span id="afterNav-ljq" tabindex="-1"></span>
        </div>
      </div>
    </div>
  </header>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

const navigateToSubmit = () => {
  router.push({ name: 'Submit' });
};
const navigateToHome=()=>{
  router.push({name:"/"})
}
</script>

<style lang="scss" scoped></style>
